<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="colorfff comlinebg mt-200 py-1 rounded20 ml-2 pl-3 d-flex" style="width: 300rpx;"><view style="color: #f6696f; margin-right: 2rpx;">*</view>您想反馈的类型是?</view>
		<view class="mt-3 mb-1 d-flex d-flex-wrap d-flex-between" style="width: 95%; margin: 20rpx auto;">
			<view @click="changeCurrent(i.id,i.dictValue,i.id)" 
				  :class="['py-2','rounded40','span-6','my-1','text-center', i.id === current? 'current' : '']" 
				  style="color: #8e9095; background: #f9fafc;" 
				  v-for="i in FeedBacktypelist" 
				  :key="i.id"
			>{{i.dictValue}}</view>
		</view>
		<view class="colorfff comlinebg py-1 rounded20 ml-2 mb-2 pl-3 d-flex" style="width: 425rpx;"><view style="color: #f6696f; margin-right: 2rpx;">*</view>请详细描述您遇到的问题和意见</view>
		<view class="rounded40 pt-2 pb-1" style="width: 95%; margin: 0 auto 20rpx; background: #f9fafc;">
			<textarea v-model="question" @input="onInput" maxlength="100" class="px-3 pt-2 font32 font28" placeholder="请详细描述您遇到的问题(10个字以上),上传页面截图帮助您更快解决。" style="width: 90%; height: 220rpx; margin: 0 auto; color: #535353;"></textarea>
		</view>
		<view class="rounded40 py-3" style="width: 95%; margin: 20rpx auto 20rpx; background: #fcfcfc;">
			<view class="plus-img d-flex d-flex-center d-flex-middle ml-3 position-relative" @click="chooseImage" :style="{'backgroundImage': `url(${feedBackImg})`}">
				<text v-if="!feedBackImg" class="iconfont icon-jia1"></text>
				<view @click.stop="deleteImage" v-if="feedBackImg" class="rounded10 d-flex-btn position-absolute font32" style="background: #fff; width: 30rpx; height: 30rpx; top: 12rpx; right: 12rpx;">×</view>
			</view>
		</view>
		<view class="colorfff comlinebg py-1 rounded20 ml-2 pl-3 d-flex" style="width: 300rpx;">联系方式(选填)</view>
		<view class="rounded40 py-1" style="width: 95%; margin: 0 auto 60rpx; background: #fcfcfc;">
			<input v-model="phone" type="number" class="pl-2" style="height: 80rpx; background: #f9fafc;" placeholder="请输入手机号码,用于与您联系"/>
		</view>
		<view class="linerbg rounded50 py-2 text-center colorfff font30" style="width: 90%; margin: 0 auto;" @click="submit">提交</view>
		<view class="d-flex-btn my-6">
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202867.png" mode="heightFix" style="height: 30rpx; height: 30rpx;"></image>
			<view class=" ml-1" style="color: #6db0e6; letter-spacing: 4rpx;">语音房间管理条例</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { mapActions } from 'vuex'
	import { reportApi } from '../../http/report';
	import { DictionaryApi } from '../../http/dictionary';
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				ctype: null,
				bgcolor:'transparent',
				title: '意见反馈',
				checked: true,
				current: null,
				type: "",
				question: "",
				feedBackImg: "",
				reportTypeIds: null,
				phone: "",
				isShow: false,
				preIimages: [],
				FeedBacktypelist: []
			}
		},
		components: {TitleBarVue},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeCurrent(ctype, dictValue, id) {
				this.current = ctype
				this.type = dictValue
				this.reportTypeIds = id
			},
			changeCheckedState() {
				this.checked = this.checked? false : true
			},
			deleteImage(e) {
				e.stopPropagation();
				this.feedBackImg = ""
				this.preIimages = []
			},
			chooseImage: async function() {
				if(!this.feedBackImg) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						success: (res) => {
							this.feedBackImg = res.tempFilePaths[0]
							this.preIimages.push(res.tempFilePaths[0])
						},
						fail: (err) => {
							console.log("err: ",err);
						}
					})
				} else {
					uni.previewImage({
						current: 0, // 当前显示图片索引
						urls: this.preIimages,// 需要预览的图片http链接列表
					});
				}
			},
			async report() {
				let params = {
					type: 6,
					reportTypeIds: this.reportTypeIds,
					reportTypeNames: this.type,
					toUid: this.$store.state.user.uid,
					remark: this.question + "，联系方式：" + this.phone,
					screenshot1: this.feedBackImg
				}
				const res = await reportApi.report(params)
			},
			async queryType() {
				let params = {
					dictId: 35,
					pageIndex: 1,
					pageSize: 20,
				}
				const res = await DictionaryApi.Dictionary(params)
				this.FeedBacktypelist = res.records
			},
			submit() {
				if(!this.type) {
					uni.showToast({
						icon: "none",
						title:'请选择反馈类型！',
						duration:1500
					})
					return
				}
				if(!this.question) {
					uni.showToast({
						icon: "none",
						title:'请先描述您遇到的问题和意见!',
						duration:1500
					})
					return
				}
				if(this.question.length < 10) {
					uni.showToast({
						icon: "none",
						title:'描述少于10个字!',
						duration:1500
					})
					return
				}
				this.report().then(() => {
					uni.showToast({
						title:'提交成功！',
						duration:1500
					})
				})
			},
			onInput() {
				if(this.question.length >= 100) {
					uni.showToast({
						icon: "none",
						title:'描述字数最多100字!',
						duration:1500
					})
					return
				}
			}
		},
		onLoad() {
			this.queryType()
		}
	}
</script>

<style scoped lang="scss">
.main {
	overflow: hidden;
	background-color: #fff !important;
	background-image: none;
	.content {
		width: 100%;
	}
	.plus-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 36rpx;
		background-color: #f7f8fa;
		background-position: center;
		background-size: cover;
		color: #9c9c9e;
	}
}
.current {
	background: #81c2fa !important;
	color: #fff !important;
}
.comlinebg{background-image: linear-gradient(to right, #7fc2fa, #e6bcfa)}
</style>
